<template>
  <div class="homeT_container">
      <el-card class="hot">
          <h3 class="hot_title">HOT</h3>
        <div class="hot_containter" v-for="(item, index) in articleList" :key="item.article_id">
            <div class="hot_article"><el-tag :type="labelType[Math.floor(Math.random()*5)]" effect="dark" size="mini">{{index}}</el-tag>
                <span  @click="goArticle(item.article_id)">{{item.article_title}}</span>
                <span class="fr">
                    <span class="comment">评论: ({{item.article_comment_count}})</span>
                    <span class="like"><span class="icon-aixin iconfont" style="margin-right: 0"></span>喜欢 ({{item.article_like_count}})</span>
                </span>
            </div>
        </div>
      <!-- <div class="hot_containter">
          <div class="hot_article"><el-button :type="labelType[Math.floor(Math.random()*5)]" size="mini">1</el-button>
            <span>1234567890</span>
            <span class="fr">
                <span class="comment">评论: (12)</span>
                <span class="like"><span class="icon-aixin iconfont"></span> 12</span>
            </span>
        </div>
      </div> -->
      </el-card>
      <el-card class="new_article" v-for="item in articleList" :key="item.article_id">
          <div class="article_title_box">
              <el-tag>{{item.article_labels? item.artcle_labels : item.article_title}}</el-tag>
              <a class="article_title" @click="goArticle(item.article_id)">标题</a>
          </div>
          <div class="article_content">
              <span>{{item.article_content}}
              {{item.article_content}}
              {{item.article_content}}</span>
          </div>
      </el-card>
  </div>
      
</template>

<script>
export default {
    data() {
        return {
            labelType:['danger','success','primary','warning','info'],
            articleList: []
        }
    },
    created() {
        this.getArticles()
        
    },
    methods: {
        // 点击跳转到文章页面，需要传入articleId
        goArticle(aticleId){
            this.$router.push({name:'article',params:{id: aticleId}})
        },
        async getArticles() {
            const {data: res} = await this.$http.get('getArticleList')
            this.articleList = res
            console.log(this.articleList)
        }
    },
}
</script>

<style lang="less" scoped>
    .homeT_container {
        .hot {
            margin-bottom: 10px;
            // height: 1000px;
        // padding: 0 10px;
            .hot_title {
                font-weight: 400;
                font-size: 16px;
                color: red;
                padding-bottom: 10px;
                border-bottom: 1px solid #ccc;
            }
            .hot_containter {
                margin: 10px 0 15px 0;
                
                .el-button {
                    margin-right: 20px;
                }
                .hot_article {
                    .el-tag {
                        // height: 30px;
                        // width: 30px;
                    margin-right: 10px;
                    }
                    .comment {
                        margin-right: 15px;
                    }
                    .like {
                        color: #f78da0;
                    }
                }
            }
        }
        .new_article {
            margin-top: 20px;
            .article_title_box {
                .article_title {
                    margin-left: 20px;
                    font-size: 20px;
                    color: #1abc9c;
                    cursor: pointer;
                }
            }
            .article_content {
                height: 106px;
                margin-top: 10px;
                // margin-left: 10px;
                overflow: hidden;
                text-indent: 2em;
                // 文字换行
                span {
                    // 实现多行文字省略号代码
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                }
                
               
            }
        }
    }
</style>